<template>
  <div class="">
    <!-- 购物车start -->
    <div class="posCartBox set-pc-style" @click="showCarList = true" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '', showGood && !showCarList ? 'posCartBoxTop' : '']">
      <div class="left">
        <div class="posCartNum" v-if="cartsNum">{{ cartsNum }}</div>
        <div class="buyIcon">
          <i class="iconfont icon-gouwuche_" />
        </div>
        <div class="price">
          <span class="left_t">{{ $i18n.t("money") }}</span>
          {{ cartsTotal }}
        </div>
      </div>
      <div class="right" @click.stop="goodsOrder">去结算</div>
    </div>
    <yzCartList v-model="showCarList" @focus="numberRight1" @blur="numberRight1" :showDestory="true" @clearCart="clearCartChild"
      @minus="numberRight1" @plus="numberRight1" :cardata="cardata" v-if="cardata && showGood" :themeColor="themeColor">
      <div class="showCartGoodList">
        <div class="left">
          <span class="left_t">{{ $i18n.t("money") }}</span>
          {{ cartsTotal }}
        </div>
        <div class="right">
          <div class="btn" @click.stop="goodsOrder">去结算</div>
        </div>
      </div>
    </yzCartList>
    <!-- 购物车end -->
  </div>
</template>
<script>
import yzCartList from "components/ui_components/yz_cartList.vue";
export default {
  props: {
    //主题色
    themeColor: {
      type: String,
      default: "#f14e4e"
    },
    cardata: {
      type: null
    },
    showGood: {
      type: Boolean,
      default: false
    },
    store_id: {
      type: String,
      default: ""
    },
    cartsNum: {
      type: null
    },
    cartsTotal: {
      type: null
    },
    childTag:{
      type:String
    },
    tag:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      cartsTotal: 0.0,
      showCarList: false,
      goodsCartsOld: "",
      cartPostClick: true
    };
  },
  components: { yzCartList },
  methods: {
    goodsOrder(){
      console.log('dddddddddddddd')
      if(!this.tag){
        this.$parent.$emit('toOrder')
      }
    },
    //商品列表 加(弹窗)
    numberRight1(infoChild) {
      console.log(this.cartPostClick, "cartPostClick");
      if (!this.cartPostClick) {
        this.$toast("请求中");
        return;
      }
      this.cartPostClick = false;
      if (infoChild.name == "addOne") {
        this.addCart(infoChild, "", infoChild.total);
      }
      if (infoChild.name == "minus") {
        let goodsT;
        for (let i = 0; i < this.cardata.length; i++) {
          if (this.cardata[i].id == infoChild.id) {
            // console.log(this.cardata[i], i);
            goodsT = this.cardata[i];
            break;
          }
        }
        this.updateCartRequest(goodsT.id, -1);
      } else if (infoChild.name == "plus") {
        let goodsT, index;
        for (let i = 0; i < this.cardata.length; i++) {
          if (this.cardata[i].id == infoChild.id) {
            console.log(this.cardata[i], i);
            index = i;
            goodsT = this.cardata[i];
            break;
          }
        }
        this.addCart(goodsT, "cart", index);
      } else if (infoChild.name == "blur") {
        let goodsT, index;
        for (let i = 0; i < this.cardata.length; i++) {
          if (this.cardata[i].id == infoChild.id) {
            index = i;
            goodsT = this.cardata[i];
            break;
          }
        }
        if (goodsT.total < 0) {
          Toast("商品数量不能为负数");
          goodsT.total = this.goodsCartsOld;
          return;
        }
        if (goodsT.total < this.goodsCartsOld) {
          let lowerNum = this.goodsCartsOld - goodsT.total;
          this.updateCartRequest(goodsT.id, -lowerNum);
        } else if (goodsT.total > this.goodsCartsOld) {
          let addNum = goodsT.total - this.goodsCartsOld;
          this.updateCartRequest(goodsT.id, addNum);
        } else if (goodsT.total == this.goodsCartsOld) {
          return;
        }
      } else if (infoChild.name == "focus") {
        this.cartPostClick = true;
        this.goodsCartsOld = infoChild.total;
      }
    },
    clearCartChild(key){
      var destroyCarts = [];
      this.cardata.forEach(item => {
        if(key == 'fail'){
          // 清楚失效的购物车商品
          if(item.is_failure == 1){
            destroyCarts.push(item.id);
          }
        }else{
          destroyCarts.push(item.id);
        }
      });
      $http
        .get("plugin.store-cashier.frontend.shoppingCart.member-cart.destroy", {
          store_id: this.store_id,
          ids: destroyCarts
        },'')
        .then(
          response => {
            if (response.result == 1) {
              this.$parent.$emit("cartUpdate");
              this.showCarList = false;
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    addCart(goods, tag, _i) {
      console.log(goods);
      let id = "";
      if (tag === "cart") {
        id = goods.goods_id;
      } else {
        id = goods.id;
      }
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.store",
          {
            goods_id: id,
            total: 1,
            store_id: this.store_id,
            option_id: goods.option_id || 0
          },
          "添加中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result === 1) {
              // if (tag == "cart") {
              //   this.carts[_i].total = Number(goods.total) + 1;
              // }
              // this.getCart(goods);
              if(!this.tag){
                this.$parent.$emit("cartUpdate", goods);
              }
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    updateCartRequest(id, num) {
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.updateNum",
          {
            id: id,
            num: num,
            store_id: this.store_id
          },
          "加载中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result == 1) {
              if (num < 0) {
                this.popNum = this.popNum + num;
              } else {
                this.popNum = this.popNum + num;
              }
              if(!this.tag){
                this.$parent.$emit("cartUpdate");
              }
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {}
        );
    }
  }
};
</script>
<style lang="scss" scoped>
.posCartBox {
  position: fixed;
  bottom: 4rem;
  left: 0;
  height: 3rem;
  border-radius: 1.53rem;
  background: #ffffff;
  margin: 0 0.75rem;
  z-index: 99;
  display: flex;
  .right {
    flex-shrink: 0;
    width: 5.63rem;
    height: 100%;
    border-radius: 0rem 1.53rem 1.53rem 0rem;
    background: var(--themeBaseColor);
    font-size: 0.94rem;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .left {
    flex: 1;
    height: 100%;
    width: 16.31rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.37rem;
    background: #00001c;
    border-radius: 1.53rem 0 0 1.53rem;
    box-sizing: border-box;
    position: relative;
    .posCartNum {
      position: absolute;
      left: 2.06rem;
      top: 0;
      font-size: 0.75rem;
      color: #ffffff;
      font-weight: 500;
      padding: 0.16rem 0.34rem;
      border-radius: 100%;
      background: #fca624;
      max-width: 2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      font-size: 1.13rem;
      font-weight: bold;
      color: #ffffff;
      margin-left: 0.78rem;
      .left_t {
        font-size: 0.75rem;
      }
    }
    .buyIcon {
      width: 2.25rem;
      height: 2.25rem;
      background: linear-gradient(329deg, #ff1313 0%, #fb7676 100%);
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-gouwuche_ {
        color: #ffffff;
        font-size: 1.5rem;
      }
    }
  }
}
.posCartBoxTop {
  bottom: 2rem !important;
  z-index: 99999;
}
.showCartGoodList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.78rem;
  .left {
    font-size: 1.13rem;
    font-weight: bold;
    color: #f15353;
    flex: 1;
    display: flex;
    align-items: center;
    .left_t {
      font-size: 0.75rem;
    }
  }
  .right {
    flex-shrink: 0;
    .btn {
      padding: 0.78rem 1.72rem;
      box-sizing: border-box;
      font-size: 0.94rem;
      font-weight: 500;
      color: #ffffff;
      background: var(--themeBaseColor);
      border-radius: 1.56rem;
    }
  }
}
</style>
